import React, {Component, PropTypes} from "react";
import classnames from "classnames";
import Notifications, {notify} from "react-notify-toast";
class InputProp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: ""
        };
    }

    render() {
        const {title, content, show} = this.props;
        return (
            <div className={classnames(
                "pop_bg",
                {"show": show}
            )}>
                <Notifications/>
                <div className="input_pop_container input_pop_container1">
                    <div className="edit-staff-info-container-parent">
                        <div className="edit-staff-info-container">
                            <div>{content}</div>
                            <div><input type="text" value={this.state.email}
                                        onChange={this._onChangeEmail.bind(this)}
                            /></div>
                        </div>
                    </div>
                    <div className="input_pop_button_group">
                        <div onClick={this._cancel.bind(this)}>取消</div>
                        <div onClick={this._confirm.bind(this)}>确定</div>
                    </div>
                </div>
            </div>
        );
    }

    _cancel() {
        this.props.popCancel();
    }

    _onChangeEmail(event) {
        this.setState({
            email: event.target.value
        });
    }

    _confirm() {
        let myColor = {background: '#0E1717', text: "#FFFFFF"};
        var myReg = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
        if (!myReg.test(this.state.email)) {
            notify.show("邮箱格式有误，请重填!", "custom", 800, myColor);
            return
        }
        this.props.popCancel();
        this.props.popConfirm(this.state.email);
    }


}

InputProp.propTypes = {
    title: PropTypes.string.isRequired
};

export default InputProp;
